// ///////////////////////////////////////////////
// fade-transform
// ///////////////////////////////////////////////
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, background 0s, color 0s, font-size 0s;
}

.fade-transform-enter,
.fade-transform-leave-from,
.fade-transform-leave-to {
  opacity: 0;
}

// ///////////////////////////////////////////////
// fade-slide
// ///////////////////////////////////////////////
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.25s;
}

.fade-slide-enter {
  opacity: 0;
  transform: translateX(-10px);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// ///////////////////////////////////////////////
// fade-bottom
// ///////////////////////////////////////////////
// Speed: 1x
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition: opacity 0.2s, transform 0.25s;
}

.fade-bottom-enter {
  opacity: 0;
  transform: translateY(-3%);
}

.fade-bottom-enter-from {
  opacity: 0;
  transform: translateY(-10%);
}

.fade-bottom-leave-to {
  opacity: 0;
  transform: translateY(10%);
}

// ///////////////////////////////////////////////
// fade-scale
// ///////////////////////////////////////////////
.fade-scale-leave-active,
.fade-scale-enter-active {
  transition: all 0.28s;
}

.fade-scale-enter-from {
  opacity: 0;
  transform: scale(1.2);
}

.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

// ///////////////////////////////////////////////
// fade-top
// ///////////////////////////////////////////////

// Speed: 1x
.fade-top-enter-active,
.fade-top-leave-active {
  transition: opacity 0.2s, transform 0.25s;
}

.fade-top-enter {
  opacity: 0;
  transform: translateY(2%);
}

.fade-top-enter-from {
  opacity: 0;
  transform: translateY(6%);
}

.fade-top-leave-to {
  opacity: 0;
  transform: translateY(-6%);
}
